<template>
  <div class="Recommend">
    <BorderTitle>推荐歌单</BorderTitle>
    <ul class="recommendList">
      <ImgListItem v-for="item in recommendList" :key="item.id" :item="item"></ImgListItem>
    </ul>
    <Loading v-if="recommendList.length==0"></Loading>
    <BorderTitle>最新音乐</BorderTitle>

    <ul class="newsong">
      <MusicListItem @play='$emit("play",$event)' v-for="(list,index) in MusicList" :key="index" :list="list"></MusicListItem>
    </ul>
    <Loading v-if="MusicList.length==0"></Loading>
    <!-- <BorderTitle>热门歌手</BorderTitle> -->
    
  </div>  
</template>

<script>
import BorderTitle from "@/components/BorderTitle";
import ImgListItem from "@/components/ImgListItem";
import MusicListItem from "@/components/MusicListItem";
import Loading from "@/components/Loading";

export default {
  name: "Recommend",
  data() {
    return {
      recommendList: [],
      MusicList: [],
    };
  },
  mounted() {
    // /personalized
    // this.$http 或 this.axios 或 this.$axios 调用axios对象。 参见plugins/axios.js Plugin.install=xxx;
    this.$http.get("/personalized?limit=6").then((d) => {
      // console.log(d);
      this.recommendList = d.data.result;
    });
    this.$http.get("/personalized/newsong?limit=10").then((d) => {
      this.MusicList = d.data.result;
      console.log(d);
    });
  },
  components: {
    BorderTitle,
    ImgListItem,
    MusicListItem,
    Loading
  },
};
</script>

<style lang="less" scoped>
.recommendList {
  display: flex;
  flex-wrap: wrap;
  padding:  0px 6px 0px 6px;
  justify-content: space-between;
}
ol,
ul {
  list-style: none;
}
.newsong{
  background-color: #ffff;
}
.Recommend{
  margin-bottom: 6rem;
  margin-top: 50px;
}
</style>